import { Column, Group } from '@/components/pro-panel/index.typing';
import { useStageStore } from '@/store/stage';
import effectColor from './effect-color';
import effectImage from './effect-image';

const useGroup = () => {
  const stageStore = useStageStore();

  const tabs: Record<string, Column[]> = {
    颜色: effectColor,
    贴图: effectImage,
  };
  const columns = tabs[stageStore.layerData.data.fillTab] || [];

  const group: Group = {
    title: '填充效果',
    key: 'effect',
    collapsed: false,
    columns: [
      {
        type: 'tab',
        prop: 'fillTab',
        label: '',
        group: 'fillEffect',
        formProps: {
          options: Object.keys(tabs).map((label) => ({ label })),
          size: 'large',
        },
      },
      ...columns,
    ],
  };

  return group;
};

export default useGroup;

// const group: Group = {
//   title: '效果配置',
//   key: 'effect',
//   collapsed: false,
//   columns: [
//     {
//       label: '基本颜色',
//       prop: 'baseWaterColor',
//       type: 'color-picker',
//     },
//     {
//       label: '叠加颜色',
//       prop: 'blendColor',
//       type: 'color-picker',
//     },
//     {
//       label: '透明度',
//       prop: 'alpha',
//       type: 'progress-input',
//       formProps: { min: 0, max: 1, step: 0.01 },
//     },
//     {
//       label: '波纹数量',
//       prop: 'frequency',
//       type: 'progress-input',
//       formProps: { min: 0, max: 20, step: 1 },
//     },
//     {
//       label: '水流速度',
//       prop: 'animationSpeed',
//       type: 'progress-input',
//       formProps: { min: 0, max: 20, step: 1 },
//     },
//     {
//       label: '水流方向',
//       prop: 'angle',
//       type: 'progress-input',
//       formProps: { min: -360, max: 360, step: 0.01 },
//     },
//     {
//       label: '振动幅度',
//       prop: 'amplitude',
//       type: 'progress-input',
//       formProps: { min: 0, max: 1, step: 0.01 },
//     },
//     {
//       label: 'UV缩放',
//       prop: 'u_frequency',
//       type: 'input',
//       span: 12,
//     },
//     {
//       label: ' ',
//       prop: 'v_frequency',
//       type: 'input',
//       span: 12,
//     },
//     {
//       label: '反射度',
//       prop: 'specularIntensity',
//       type: 'progress-input',
//       formProps: { min: 0, max: 10, step: 0.01 },
//     },
//     {
//       label: '折射度',
//       prop: 'refractIntensity',
//       type: 'progress-input',
//       formProps: { min: 0, max: 10, step: 0.01 },
//     },
//   ],
// };

// export default group;
